<template>
	<div class="box-select">
		<template v-if="item.functionCode !== 'between'">
			<a-select
				mode="tags"
				:default-value="item.params || ''"
				:token-separators="[',']"
				@change="changeSelectValue"
			>
				<a-select-option v-for="(item, index) in listData" :key="index">
					{{ item }}
				</a-select-option>
			</a-select>
		</template>

		<template v-else>
			<span class="word block left">在</span>
			<!-- allow-clear -->
			<a-input class="input" @change="changeInputValue($event, 'before')"></a-input>
			<span class="word">-</span>
			<a-input class="input" @change="changeInputValue($event, 'after')"></a-input>
			<span class="word block">之间</span>
		</template>
	</div>
</template>
<script lang="ts">
import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator'
import { FieldsType } from '../type'

@Component({
	name: 'ConditionValue',
	components: {}
})
export default class extends Vue {
	@Prop() item!: FieldsType
	@Prop() attrCode!: string
	@Prop() attrType!: string
	@Prop() projectId!: number
	@Prop() functionCode!: string
	@Prop() pkey!: number // 条件的key
	@Prop() subkey!: number // 子条件的key
	@Prop() itemKey!: number // 指标的key
	@Prop() level!: string

	private listData: string[] = []
	private value: any = []

	mounted(): void {
		this.getAttrValueData()
	}

	@Emit('changeSelectValue')
	private changeSelectValue(value: string) {
		return { value, level: this.level, pkey: this.pkey, subkey: this.subkey, itemKey: this.itemKey }
	}
	@Emit('changeInputValue')
	private changeInputValue(e: any, opportunity: string) {
		if (opportunity === 'before') {
			this.value.push(e.target.value)
		}
		if (opportunity === 'after') {
			this.value.push(e.target.value)
		}
		return {
			level: this.level,
			pkey: this.pkey,
			subkey: this.subkey,
			itemKey: this.itemKey,
			value: this.value
		}
	}

	@Watch('attrCode')
	@Watch('attrType')
	@Watch('projectId')
	private getAttrValueData() {
		this.$request('/reportservice/event/attr-values', {
			method: 'POST',
			data: {
				attrCode: this.attrCode,
				attrType: this.attrType,
				projectId: this.projectId
			}
		}).then((res: any) => {
			const { data } = res
			this.listData = data
		})
	}
}
</script>
<style lang="scss" scoped>
.box-select {
	float: left;
	// width: auto;
	min-width: 80px;
	.ant-select {
		min-width: 80px;
	}
	.input {
		width: 50px !important;
	}
	.word {
		color: #d8dce6;
		margin: 0 8px !important;
		&.block {
			color: #203259;
		}
		&.left {
			margin: 0 8px 0 0 !important;
		}
	}
	.ant-select-selection {
		width: 70px !important;
		background: none !important;
		margin-right: 8px !important;
	}
}
</style>
